<template>
<div class="pb50" v-loading="loading">
    <!--内容-->
    <div class="product-content">
      <!--基本信息-->
      <div class="common-form">{{$t('plus.base_info')}}</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.order_no')}}</span> {{detail.orderNo}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.buyer1')}}</span> {{detail.nickName}} 

<span>{{$t('plus.user_id_placeholder',{place1:detail.userId})}}</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.shipping_status')}}</span>
              <template v-if="detail.deliveryStatus == 0"> {{$t('plus.status_wait_delivery')}} </template>
              <template v-if="detail.deliveryStatus == 1"> {{$t('plus.status_delivered')}} </template>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--编辑-->
      <Add
        v-if="open_edit"
        :open_edit="open_edit"
        :order="userModel"
        @close="closeDialogFunc($event, 'edit')"
      ></Add>
      <!--商品信息-->
      <div class="common-form mt16">{{$t('plus.product_info')}}</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.product_image')}}</span>
              <img :src="detail.productImage" width="80" height="80" />
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.product_name1')}}</span> {{detail.productName}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.product_specification')}}</span> {{detail.productAttr}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('plus.product_price')}}</span> {{detail.productPrice}}

            </div>
          </el-col>
        </el-row>
      </div>
      <!--收货信息-->
      <div>
        <div class="common-form mt16">{{$t('plus.receiver_info')}}</div>
        <div class="table-wrap">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('plus.receiver_name')}}</span> {{detail.name}}

              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('plus.receiver_phone')}}</span> {{detail.mobile}}

              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('plus.receiver_address')}}</span> {{detail.region.province}} {{detail.region.city}} {{detail.region.region}} {{detail.detail}}


              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--发货信息-->
      <div v-auth="'/order/order/delivery'">
        <div v-if="detail.deliveryStatus == 0">
          <!-- 去发货 -->
          <div class="common-form mt16">{{$t('plus.go_to_delivery')}}</div>
          <el-form size="small" ref="form" :model="form" label-width="100px">
            <el-form-item :label="$t('plus.logistics_company')">
              <el-select v-model="form.expressId" :placeholder="$t('plus.select_express')">
                <el-option
                  :label="item.expressName"
                  v-for="(item, index) in expressList"
                  :key="index"
                  :value="item.expressId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('plus.logistics_no')"
              ><el-input v-model="form.expressNo" class="max-w460"></el-input
            ></el-form-item>
          </el-form>
        </div>
        <div v-else="">
          <div class="common-form mt16">{{$t('plus.delivery_info')}}</div>
          <div class="table-wrap">
            <el-row>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('plus.logistics_company_colon')}}</span> {{detail.expressName}}

                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('plus.logistics_no_colon')}}</span> {{detail.expressNo}}

                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('plus.delivery_time_colon')}}</span> {{detail.deliveryTime}}

                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc"
        >{{$t('plus.back_to_previous')}}</el-button
      >
      <!--确认发货-->
      <template v-if="detail.deliveryStatus == 0">
        <el-button size="small" type="primary" @click="onSubmit"
          >{{$t('plus.confirm_delivery')}}</el-button
        >
      </template>
    </div>
  </div>
</template>

<script>
import CardApi from "@/api/card.js";
import Add from "./dialog/Add.vue";
import { deepClone } from "@/utils/base.js";
export default {
  components: {
    Add
  },
  data() {
    return {
      active: 0,
      /*是否加载完成*/
      loading: true,
      /*订单数据*/
      detail: {
        payStatus: [],
        payType: [],
        deliveryType: [],
        user: {},
        address: [],
        product: [],
        orderStatus: [],
        extract: [],
        extractStore: [],
        express: [],
        deliveryStatus: [],
        extractClerk: []
      },
      /*是否打开添加弹窗*/
      open_add: false,
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*发货*/
      form: {
        /*订单ID*/
        expressId: null,
        /*订单号*/
        expressNo: ""
      },
      forms: {
        is_cancel: 1
      },
      extract_form: {
        order: {
          extract_status: 1
        }
      },
      /*虚拟商品发货*/
      virtual_form: {
        virtual_content: ""
      },
      order: {},
      delivery_type: 0,
      /*配送方式*/
      exStyle: [],
      /*门店列表*/
      shopList: [],
      /*当前编辑的对象*/
      userModel: {},
      /*时间*/
      createTime: "",
      /*快递公司列表*/
      expressList: [],
      shopClerkList: [],
      /*是否打开编辑弹窗*/
      open_edit: false
    };
  },
  created() {
    /*获取列表*/
    this.getParams();
  },
  methods: {
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    /*获取参数*/
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      const params = this.$route.query.orderId;
      CardApi.orderdetail({
        orderId: params
      }, true).then(res => {
        self.loading = false;
        self.detail = res.data;
        self.expressList = res.data.expressList;
        self.shopClerkList = res.data.shopClerkList;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*发货*/
    onSubmit() {
      let self = this;
      let param = self.form;
      if (param.expressId == null) {
        ElMessage.error($t("plus.select_logistics"));
        return;
      }
      if (param.expressNo == "") {
        ElMessage.error($t("plus.fill_logistics_no"));
        return;
      }
      let orderId = this.$route.query.orderId;
      param.orderId = orderId;
      CardApi.delivery(param, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("plus.delivery_success"),
          type: "success"
        });
        self.getParams();
      }).catch(error => {
        self.loading = false;
      });
    },
    /*打开编辑*/
    editClick(item) {
      this.userModel = deepClone(item);
      this.open_edit = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (f == "edit") {
        this.open_edit = e.openDialog;
        this.getParams();
      }
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

